<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <style>
            #nav{
                height:48px;
                background:url('./images/repeat.png') repeat-x 0px 0px;
                }
            #nav ul{
                list-style:none;height:48px;
               
            }
            #nav>ul>li{
              width:120px;height:42px;
              float:left;
              color:white;
              font-weight:bold;
              line-height:48px;
              text-align:center;
            }
            #nav>ul>li>a:hover{
                background-color:white;
                color:blue;
            }
            #nav>ul>li>a{
                display:block;
                width:120px;height:42px;
                text-decoration:none;
                color:white;
                
            }
            #nav>ul>li>ul{display:none;
                text-align:left;
            }
            #nav>ul>li:hover ul{display:block;}
            #nav>ul>li>ul>li>a{
                color:blue;
                background-color:white;
                text-decoration:none;
            }
        </style>
    </head>
    <body>
        <h2>导航</h2>
        <div id='nav'>
            <ul>
                <li><a href=''>首页</a></li>
                <li><a href=''>商品展示</a>
                    <ul>
                        <li><a href=''>男装</a></li>
                        <li><a href=''>女装</a></li>
                        <li><a href=''>童装</a></li>
                    </ul>
                </li>
                <li><a href=''>限时抢购</a></li>
                <li><a href=''>在线新闻</a></li>
                <li><a href=''>网站公告</a></li>
                <li><a href=''>我要留言</a></li>
                <li><a href=''>帮助</a></li>
            </ul>
        </div>
    </body>
</html>